<template>
  <div class="navbar">
    <div class="navbar-left">
      <el-icon class="menu-toggle" @click="handleToggleSidebar">
        <Fold v-if="isCollapse" />
        <Expand v-else />
      </el-icon>
      <span class="app-title">Unimodel Meeting</span>
    </div>
    
    <div class="navbar-right">
      <!-- 主题切换组件 -->
      <ThemeSwitch />
      
      <el-dropdown @command="handleCommand">
        <span class="user-info">
          <el-avatar :size="30" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <span class="username">Admin</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人中心</el-dropdown-item>
            <el-dropdown-item command="settings">设置</el-dropdown-item>
            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Expand, Fold } from '@element-plus/icons-vue'
import ThemeSwitch from './ThemeSwitch.vue'
import { useUserStore } from '../stores/modules'

export default {
  name: 'TopNavbar',
  components: {
    Expand,
    Fold,
    ThemeSwitch
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  emits: ['toggle-sidebar'],
  setup(props, { emit }) {
    const router = useRouter()
    const userStore = useUserStore()
    
    const handleToggleSidebar = () => {
      // 只通过emit事件通知父组件切换侧边栏
      emit('toggle-sidebar')
    }
    
    const handleCommand = (command) => {
      switch (command) {
        case 'logout':
          // 处理退出登录逻辑
          console.log('退出登录')
          userStore.logout()
          router.push('/login')
          break
        case 'profile':
          // 处理个人中心逻辑
          console.log('个人中心')
          break
        case 'settings':
          // 处理设置逻辑
          console.log('设置')
          break
      }
    }
    
    return {
      handleToggleSidebar,
      handleCommand
    }
  }
}
</script>

<style scoped>
.navbar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
}

.navbar-left {
  display: flex;
  align-items: center;
}

.menu-toggle {
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
}

/* 暗色主题下菜单切换图标优化 */
html.dark .menu-toggle {
  color: #e5eaf3;
  filter: brightness(1.2);
}

.app-title {
  font-size: 18px;
  font-weight: 600;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 20px;
}

.username {
  margin-left: 10px;
  font-size: 14px;
}
</style>